<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Item List</title>

    <style>
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            background: url('img/background.png') no-repeat center center;
            background-size: 95%;
            background-color: #000;
            background-attachment: fixed;
            image-rendering: pixelated;
        }

        body {
            margin: 0;
            padding: 0;
            min-height: 100%;
        }

        #top {
            height: 50px;
            width: 100%;
            background-color: #000;
            display: flex;
            align-items: center; /* 垂直居中 */
            justify-content: space-between; /* 左右两端对齐 */
            padding: 0 10px;
            box-sizing: border-box;
        }

        #loge {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        #loge img {
            height: 40px;
            width: 40px;
            image-rendering: pixelated;
        }

        #loge p {
            color: #d1d1d1;
            font-size: 20px;
            margin: 0;
        }

        #login {
            height: 50px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        #login p {
            color: #d1d1d1;
            font-size: 16px;
            margin: 0;
            user-select: none;
        }

        .operaButton {
            height: 30px;
            padding: 0 12px;
            background-color: #3a3a3a;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 10px;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.2s ease;
            box-sizing: border-box;
        }

        .operaButton:hover {
            background-color: #505050;
        }

        #content {
            padding-top: 30px;
            margin: 0 auto;
            width: 75%;
            min-height: calc(100vh - 50px);
            background-color: #2c2925;
        }

        #title {
            width: 100%;
        }

        h1 {
            font-size: 36px;
            text-align: center;
            margin: 0 0 20px 0;
            color: #d1d1d1;
        }

        .custom-line {
            border: none;
            border-top: 2px solid #d1d1d1;
            width: 90%;
            margin: 20px auto;
        }

        #introduction {
            width: 90%;
            margin: 0 auto;
        }

        #introduction p {
            color: #d1d1d1;
        }

        #research {
            width: 90%;
            margin: 0 auto;
        }

        #searchBox {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        #searchBox label {
            color: #b1b1b1;
            font-weight: 500;
            user-select: none;
            min-width: 70px;
        }

        #searchBox input[type="text"] {
            flex: 1;
            padding: 6px 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1.5px solid #555;
            background-color: #3a3a3a;
            color: #d1d1d1;
            outline: none;
            transition: border-color 0.3s ease, background-color 0.3s ease;
        }

        #searchBox input[type="text"]:focus {
            border-color: #888;
            background-color: #444;
        }

        #searchBox button {
            padding: 7px 18px;
            font-size: 16px;
            background-color: #3a3a3a;
            color: #d1d1d1;
            border: 1.5px solid #555;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease, border-color 0.3s ease;
        }

        #searchBox button:hover {
            background-color: #505050;
            border-color: #888;
        }

        .show {
            background-color: #000;
            border: 1.5px solid #444;
            border-radius: 8px;
            min-height: 80px;
            margin-top: 12px;
            padding: 12px;
            color: #d1d1d1;
            font-size: 16px;
            line-height: 1.5;
            box-sizing: border-box;
        }

        #itemList {
            width: 90%;
            margin: 0 auto;
        }

        .item-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 8px 0;
        }

        .item-grid img {
            width: calc((100% - (20 - 1) * 8px) / 20);
            aspect-ratio: 1 / 1;
            border-radius: 6px;
            object-fit: contain;
            image-rendering: pixelated;
            background-color: #b1b1b1;
        }

        .item-grid img:hover {
            background-color: #00d9ff; /* 悬浮时背景变色 */
            cursor: pointer;           /* 鼠标变成小手 */
            box-shadow: 0 0 6px #ffa500; /* 发光效果（可选） */
            transition: all 0.2s ease;
        }

        /* 底部占位符 */
        #bottomSpacer {
            height: 50px;
        }
    </style>
</head>
<body>
<div id="top">
    <div id="loge">
        <img src="img/site_avatar_isaac_l.webp" alt="Isaac Wiki">
        <p>以撒的结合Wiki</p>
    </div>
    <div id="login">
        <!-- 预留登录/注册区域 -->
    </div>
</div>
<div id="content">
    <div id="title">
        <h1>道具</h1>
    </div>

    <hr class="custom-line">

    <div id="introduction">
        <p>
            道具为以撒的结合中的一个组成部分。它们能修改角色的属性或修改角色的泪弹/泪弹效果以及更多。
        </p>
        <p>
            一般来说，道具被分为不同的类型和组别。有些是被动道具，会永久给予角色新效果，其余的则是主动道具，只在被使用时生效。原版以撒的结合有196个可收集（主动及被动）道具；道具的数量在重生里明显增加，道具图鉴共有341个可收集道具。胎衣新增95个新道具，道具总数达436个。胎衣†又新增111个新道具，道具总数达到547个。而在扁桃体被从道具图鉴移除后，忏悔中又增加了171个新道具，道具图鉴中的道具总数达到717个。
        </p>
        <p>
            部分道具具有装饰效果，会改变角色的外观，更改角色的贴图。但对阿撒泻勒而言，此装饰效果并不是更改角色的贴图，而是用装饰贴图覆盖在角色贴图上面。
        </p>
        <p>
            重生中有15个道具是特殊道具；而在胎衣中，有12个；忏悔中特殊道具的机制被取消。
        </p>
        <p>
            忏悔中引入了道具的隐藏机制——品质，道具品质从低到高为0~4。
        </p>
        <p>
            忏悔中引入了道具的标签，用于获得套装、一些特殊的指定多道具效果或解锁成就。
        </p>
        <p>
            与道具相似的可收集物品有卡牌、胶囊和饰品。
        </p>
        <p>
            使用控制台中的spawn指令能生成随机道具或指定道具。 使用控制台中的giveitem指令能给予角色指定道具。
            使用控制台中的remove指令能移除角色指定道具。
        </p>
    </div>

    <hr class="custom-line">

    <div id="research">
        <h1>道具搜索</h1>
        <div id="searchBox">
            <label for="searchInput">道具名称：</label>
            <input type="text" id="searchInput" placeholder="请输入道具名称">
            <button id="submit">搜索</button>
        </div>
        <div id="searchResult" class="show">

        </div>
    </div>

    <hr class="custom-line">

    <div id="itemList">
        <h1>所有道具</h1>
        <div id="allItem" class="show">
        </div>
    </div>

    <div id="bottomSpacer"></div>
</div>
</body>

<script src="js/jQuery-3.7.1.min.js"></script>
<script>
    $(document).ready(function () {
        const jwt = localStorage.getItem("jwt");
        const loginDiv = $("#login");

        if (jwt) {
            // 有 jwt，显示头像、名称和登出按钮
            const name = localStorage.getItem("name") || "用户";
            const imgUrl = localStorage.getItem("imgUrl") || "img/default_avatar.png";

            const userHtml = `
    <img src="${imgUrl}" alt="头像" id="userAvatar" style="height:30px; width:30px; border-radius:50%; vertical-align:middle; margin-right:8px; object-fit:cover;">
    <p id="userName" style="color:#d1d1d1; font-size:16px; margin:0; line-height:30px; display:inline-block; vertical-align:middle;">${name}</p>
    <div id="logoutBtn" class="operaButton" style="margin-left:12px;">
        <p>登出</p>
    </div>
`;
            loginDiv.html(userHtml);

            // 登出按钮暂时不绑定事件，后续可以加
            $("#logoutBtn").click(() => {
                // 清除登录相关的 localStorage 信息
                localStorage.removeItem("jwt");
                localStorage.removeItem("name");
                localStorage.removeItem("imgUrl");
                // 你如果存了别的登录相关信息，也一起清理，比如 id、username 等等
                localStorage.removeItem("id");
                localStorage.removeItem("username");

                // 刷新页面
                location.reload();
            });

            // ✅ 绑定头像和用户名点击跳转 userInfo.html
            $("#userAvatar, #userName").click(() => {
                window.open("userInfo.html");
            });

            // ✅ 底部插入“创建道具”按钮，放在 #bottomSpacer 之上
            const createBtnHtml = `
        <div style="text-align:center; margin:30px 0 20px 0;">
            <button id="createItemBtn" style="padding:10px 26px; font-size:18px; background-color:#3040a0; color:#fff; border:none; border-radius:8px; cursor:pointer;">
                创建道具
            </button>
        </div>
    `;
            $("#bottomSpacer").before(createBtnHtml);

            // 按钮点击跳转
            $("#createItemBtn").click(function () {
                window.location.href = "createItem.html";
            });

        } else {
            $("#login").html(
                '<div id="loginBtn" class="operaButton">' +
                '<p>登录</p>' +
                '</div>' +
                '<div id="registerBtn" class="operaButton">' +
                '<p>注册</p>' +
                '</div>'
            )
            $("#loginBtn").click(function () {
                window.location.href = "login.html";
            });
            $("#registerBtn").click(function () {
                window.location.href = "register.html";
            });
        }

        $.ajax({
            url: "http://localhost:8080/QueryAllItemMvp",
            type: "GET",
            dataType: "json",
            success: function (res) {
                if (res.code === 1) {
                    let itemList = res.data;
                    let html = '<div class="item-grid">';
                    itemList.forEach(function (item) {
                        let cleanPath = item.path.trim();
                        html += `<img src="${cleanPath}" alt="道具${item.id}" class="item-img" data-id="${item.id}">`;
                    });
                    html += '</div>';
                    $("#allItem").html(html);

                    // 绑定点击事件
                    $(".item-img").click(function () {
                        let id = $(this).data("id");
                        window.open(`itemInfo.html?id=${id}`, '_blank');
                    });
                } else {
                    $("#allItem").html("<p>道具加载失败！</p>");
                }
            },
            error: function () {
                $("#allItem").html("<p>无法连接服务器</p>");
            }
        })

        $("#submit").click(function () {
            let itemName = $("#searchInput").val().trim();
            if (itemName === "") {
                $("#searchResult").html("<p>请输入道具名称</p>");
                return;
            }

            $.ajax({
                url: "http://localhost:8080/QueryItemMvpByName",
                type: "GET",
                data: { name: itemName },
                dataType: "json",
                success: function (res) {
                    if (res.code === 1 && res.data.length > 0) {
                        let resultHtml = '<div class="item-grid">';
                        res.data.forEach(function (item) {
                            let cleanPath = item.path.trim();
                            resultHtml += `<img src="${cleanPath}" alt="道具${item.id}" class="item-img" data-id="${item.id}">`;
                        });
                        resultHtml += '</div>';
                        $("#searchResult").html(resultHtml);

                        // 绑定点击事件
                        $(".item-img").click(function () {
                            let id = $(this).data("id");
                            window.open(`itemInfo.html?id=${id}`, '_blank');
                        });
                    } else {
                        $("#searchResult").html("<p>未找到匹配的道具</p>");
                    }
                },
                error: function () {
                    $("#searchResult").html("<p>搜索失败，请检查服务器连接</p>");
                }
            });
        });
    })
</script>
</html>